<template>
	<view>
		<view class="" style="">
			<u-tabs :list="list" :current="current" @change="change" :bold='true' :active-color="'#0dd1f3'" :inactive-color="'#333'"></u-tabs>
		</view>
		<view class="p10">
			<view class="detailBrandside_bottom">
				<view class="detailBrandside" v-for="(item,index) in arrcreator " style="" @click="handeldiamondMallDetail(item)" >
					<view class="detailBrandside_box" style="">
						<view class="detailBrandside_box_top" style="">
							<image :src="item.image" class="detailBrandside_image" mode=""></image>
						</view>
						<view class="detailBrandside_bottom_text" style="background: #fff">
<!--							<image class="detailBrandside_bottom_bg" src="../../static/home/detailmengban.png" mode="">-->
<!--							</image>-->
							<view class="p10">
								<view class="" style="padding: 0rpx;font-size: 12rpx;height: 200rpx;">
									<view class="size-28 fw" @click="handeldiamondMallDetail(item)">
										{{item.name}}
									</view>
									<view class="flex-between flex1 mt-20" @click="handeldiamondMallDetail(item)">
										<view class="flex1" style="align-items: center;">
											<view class="diamondMall_limit">
												<image :src="item.author_image" mode="" class="photo"
													style="border-radius: 50%"></image>
											</view>
											<view class="diamondMall_number ml-10 size-26">
												{{item.author_name}}
											</view>
										</view>
									</view>
									<view class="flex1 flex-between mt-25 " style="">
										<view class="size-26" style="color: #999;">
											共{{item.tcount}}个
										</view>
                                        <u-icon class="collection" @click="changeCare(item,index)" name="heart-fill" size="34" color="#0dd1f3" v-if="item.is_focus==1" style="float: right;"></u-icon>
                                        <u-icon class="collection"@click="changeCare(item,index)" name="heart" size="34" color="#999" v-else style="float: right;"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="20" height="800rpx" closeable>
			<view class="p10">
				<view class="flex1" style="align-items: center;">
					<view class="" style="    width: 100px;height: 100px;background-color: '';border-radius: 15px;">
						<image class="photo" :src="image" mode="" style="border-radius: 15px;"></image>
					</view>
					<view class="ml-20 ">
						<view class="fw size-32">
							{{name}}
						</view>
						<view class="mt-60">
							{{tcount}}个
						</view>
					</view>
				</view>
				<view class="mt-20">
					默认按编号排序
				</view>
				<view class="root" style="display: flex;flex-wrap: wrap;width:100%;justify-content: space-between;">
					<view class="popup_price mt-20" style="" @click="gohomeDetails(item)" v-for="item in myCollectprice">
						<view class="text-right" style="height: 32rpx;margin-top: 10rpx;">
							<view class="blue" v-if="item.status==0">铸造中</view>
							<view class="green" v-if="item.status==1">持有中</view>
							<view class="colorRed" v-if="item.status==2">挂售中</view>
							<view class="blue" v-if="item.status==3">交易中</view>
							<view class="blue" v-if="item.status==4">已出售</view>
							<view class="blue" v-if="item.status==5">已转赠</view>
							<view class="blue" v-if="item.status==6">创造失败</view>
						</view>
						<view class="text-center popup_price_2 fw">
							￥{{item.price}}
						</view>
						<view class="text-center popup_price_2 fw mt-5">
							{{item.goods_num}}
						</view>
						
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '全部',
						status: 0
					},
					// {
					// 	name: '持有中',
					// 	status: 1
					// },
					// {
					// 	name: '挂售中',
					// 	status: 2
					// },
					// {
					// 	name: '交易中',
					// 	status: 3
					// }, 
					{
						name: '已出售',
						status: 4
					}, 
					// {
					// 	name: '已转赠',
					// 	status: 5
					// },
					// {
					// 	name: '已合成',
					// 	status: 6
					// },
				],
				current: 0,
				blind_list: [],
				myCollectprice: [],
				tcount: '',
				price: '',
				show: false,
				showUpImg: true,
				is_focus: '',
				image: "",
				name: '',
				id: 1,
				arrcreator: [],
				item: 0,
				query: {
					page: 1,
					pagesize: 10,
					search: "",
					time_order: '',
					price_order: '',
					// goods_id:''
				},
				status: 'more',
				goods_id: [],
				tabs: [],
			}
		},
		onShow() {
			console.log(this.options);
			this.myCollectlist()
			
		},
		onPullDownRefresh() {
			setTimeout(function () {
				uni.stopPullDownRefresh();
				
			}, 1000);
			this.myCollectlist()
		},
		methods: {
			changeCare(item,index){
				this.$http('api/user/userFocus', {
					goods_id: item.goods_id,
					type: 0
				}, 'POST').then(res => {
					console.log(res.msg);
					uni.showToast({
						title: res.msg,
                        icon: 'none'
					})
				});
                if(item.is_focus==0){
                    item.is_focus = 1
                }
                if(item.is_focus==1){
                    item.is_focus = 0
                }
                this.$set(this.arrcreator,item,index)
                console.log("====",this.arrcreator)
				this.myCollectlist()
			},
			change(index) {
				console.log(index)
				this.current = index;
				console.log(this.current);
				this.myCollectlist()
			},
			// 详情
			gohomeDetails(item) {
				// console.log(item.id);
				if(this.current==1){
					
				}else{
					uni.navigateTo({
						url: '/pages/my/mycollectDetail?id=' + item.id
					})
				}
				
			},
			handeldiamondMallDetail(item) {
				this.show = true
				console.log(this.current)
				var current=0
				if(this.current==0){
					current=0
				}else{
					current=4
				}
				this.$http('api/orders/usersGoodsList', {
					status: current,
					id: item.goods_id
				}).then(res => {
					// console.log(res);
					this.myCollectprice = res
					this.image=this.myCollectprice[0].image
					this.name=this.myCollectprice[0].name
					this.tcount=item.tcount
					
				})
			},
			myCollectlist() {
				console.log(this.current)
				var current=0
				if(this.current==0){
					current=0
				}else{
					current=4
				}
				this.$http('api/orders/usersGoodsListGroup', {
					time_order: '',
					price_order: '',
					page: 1,
					pagesize: 10,
					search: "",
					status: current
				}).then(res => {
					this.arrcreator = res
				})
			},
			backhomeDetails() {
				uni.navigateBack({
					url: '/pages/home/homeDetails'
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				console.log(this.current);

				if (current == 0) {
					this.myCollectlist()
				} else if (current == 1) {
					this.myCollectlist()
				} else if (current == 2) {
					this.myCollectlist()
				} else if (current == 3) {
					this.myCollectlist()
				} else if (current == 4) {
					this.myCollectlist()
				} else if (current == 5) {
					this.myCollectlist()
				} else if (current == 6) {
					this.myCollectlist()
				}
			},
		}
	}
</script>
<style lang="less" scoped>
page{
    background: #f8f8f8;
}
	.root::after{
		content: "";
		width: 220rpx;
	}
	.popup_price {
		background: #F5F5F5;
		width: 220rpx;
		height: 140rpx;
		border-radius: 32rpx;
	}
	.blue,.green,.colorRed{
		color: #2979FF;
		font-size: 18rpx;
		margin-right: 10rpx;
	}
	.green{
		color: green;
	}
	.colorRed{
		color: red;
	}
	.diamondMall_limit {
		background-color: #F8D3AE;
		width: 30px;
		height: 30px;
		line-height: 20px;
		text-align: center;
		border-radius: 50%;
        image{
            width: 100%;
            height: 100%;
        }
	}

	.diamondMall_number {
		// background-color: #FCF6E6;
		width: 70px;
		height: 20px;
		line-height: 20px;
	}


	.midActive {
		// border-bottom: 10rpx solid #44ACFF;
		color: #000;
		font-weight: 600;

		.line {
			width: 40%;
			height: 10rpx;
			position: relative;
			top: 9rpx;
			left: 30%;
			background-color: rgb(0, 203, 211);
		}
	}

	.detailBrandside_bottom_bg {
		width: 100%;
		height: 100%;
		position: absolute;
		border: 1px solid #DADADA;
		border-radius: 10rpx;
	}

	.detailBrandside_bottom_text {
		width: 100%;
		// height: 350rpx;
		position: relative;
	}

	.detailBrandside_image {
		width: 100%;
		height: 100%;
		border-radius: 24rpx 24rpx 0 0;
	}

	.detailBrandside_bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		// width: 700rpx;
	}

	.detailBrandside {
		width: 346rpx;
		height: 460rpx;
		margin: 0px 0px 170rpx 0px;

	}

	.detailBrandside_box {
		width: 100%;
		height: 100%;
		border-radius: 12px;
	}

	.detailBrandside_box_top {
		width: 100%;
		height: 70%;
		// background-color: antiquewhite;
	}
</style>
